<template>
  <div class="test-page">
    <button v-tip="{cnt:'测试'}">测试按钮</button>

    <div class="list-column" v-move>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

    <div class="move-demo" v-move2></div>
  </div>
</template>

<script>
  let _el = null
  export default {
    name: 'test',
    directives:{
      tip:{
        bind:function (el,binding) {
          console.log(el,binding)
          const options = binding.value
          const style = options.style ? options.style : {}
          const tip = options.cnt


          // 事件绑定
          function mouseMove(event){
            // console.log(event)
            if(_el) {
              _el.style.left = event.clientX - 15 + 'px'
              _el.style.top = event.clientY + 20 + 'px'
            }
          }

          function mouseEnter(event){
            // 创建元素
            _el = document.createElement("div")
            Object.keys(style).forEach((key) => {
              _el.style[key] = style[key]
            })
            _el.innerHTML = tip
            _el.className = 'ost-tip'
            // 插入元素
            document.body.appendChild(_el)
          }
          function mouseLeave(event){
            if(_el && _el.parentNode){
              _el.parentNode.removeChild(_el)
            }
          }

          el.onmousemove = mouseMove
          el.onmouseleave = mouseLeave
          el.onmouseenter = mouseEnter

        },
        unbind:function (el,binding) {
          if(_el && _el.parentNode){
            _el.parentNode.removeChild(_el)
          }
        }
      },
      move:{
        bind:function (el,binding) {
          // 可以进行移动
          let originX = 0,startX = 0
          function mouseup(e){
            //el.style.cursor = "auto"
            document.body.style.userSelect = ""
            document.onmouseup = null
            document.onmousemove = null
          }

          function mousemove (e) {
            // 右滑 左滑的问题
            el.scrollLeft = -(e.clientX - originX) + startX
          }

          function mousedown(e){
            originX = e.clientX
            startX = el.scrollLeft
            document.body.style.userSelect = "none"
            document.onmouseup = mouseup
            document.onmousemove = mousemove
          }

          // 事件绑定
          el.onmousedown = mousedown

        }
      },
      move2:{
        bind:function (el,binding) {

          function mouseup(e){
            //el.style.cursor = "auto"

            document.onmouseup = null
            document.onmousemove = null
          }

          function mousemove (e) {
            console.log()
            el.style.left =   startLeft + e.clientX - originX + 'px'
            el.style.top =   startTop + e.clientY - originY + 'px'
          }
          // 事件绑定
          let originX,originY,startLeft,startTop
          function mousedown(e){
            el.style.position = 'fixed'
            originX = e.clientX
            originY = e.clientY
            startLeft = el.offsetLeft
            startTop = el.offsetTop
            document.onmouseup = mouseup
            document.onmousemove = mousemove
          }
          el.onmousedown = mousedown
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .test-page{
    padding: 10px;
    button{
      background: #1b95e0;
      color: white;
    }
  }
  button{
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
  }
  .list-column{
    width: 100%;
    overflow-y: auto;
    ul{
      list-style: none;
      display: flex;
      padding: 0;
    }
    li{
      height: 300px;
      width: 150px;
      border:1px solid blue;
      margin-right: 30px;
      flex:  0 0 150px;
      pointer-events: none;
    }
  }
  .move-demo{
    width: 200px;
    height: 200px;
    background: #1b95e0;
    margin-top: 10px;
  }
</style>
